<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Real Estate Builders Free Responsive Website Templates - icon">
    <meta name="author" content="webThemez.com">
    <title>欢迎来到拴马桩</title>
    <link rel="favicon" href="assets/images/favicon.png">
    <link rel="stylesheet" media="screen" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <!-- Custom styles for our template -->
    <link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen">
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script th:src="@{/webjars/jquery/3.6.0/dist/jquery.js}"></script>
    <link rel="shortcut icon" href="Imperial/assets/img/logo.php">
    <link rel="stylesheet" type="text/css" href="assets/css/ShoppingCart.css"/>
    <!--	<script src="assets/js/vue.min.js" type="text/javascript" charset="utf-8"></script>-->
    <!--	<script src="assets/js/vue-resource.js" type="text/javascript" charset="utf-8"></script>-->
    <!--	<script src="assets/js/cart.js" type="text/javascript" charset="utf-8"></script>-->
    <link rel="stylesheet" th:href="@{/webjars/layui/2.5.7/css/layui.css}">
    <script th:src="@{/webjars/layui/2.5.7/layui.js}"></script>
</head>

<body>
<!-- Fixed navbar -->
<div th:replace="~{commons/commons::topbar(active='order')}"></div>
<!-- /.navbar -->

<header id="head" class="secondary">
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                <h1>Our Price</h1>
            </div>
        </div>
    </div>
</header>
<!-- container -->
<br>
<div id="app" class="container" style="height: 600px">
    <h2 class="title">我的订单</h2>
    <table class="tab" width="100%" border="0" cellspacing="0" cellpadding="0">
        <thead>
        <tr >
            <th style="align-content: center">商品信息</th>
            <th style="align-content: center">订单号</th>
            <th style="align-content: center">商品金额</th>
            <th >
                日期
            </th>
            <th >
                订单状况
            </th>
            <th style="width: 16.5%; ">编辑</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in productList">
            <td >

                    <p>
                        <a v-bind:href="getGoodsHref(item.number)">{{item.address}}{{item.number}}</a>
                    </p>
                    <!--						<p class="tip">赠送：<span style="margin-right: 5px;" v-for="part in item.parts" v-text="part.partsName"></span></p>-->

            </td>
            <td>{{item.oid}}</td>
            <td>{{item.price}}元</td>
            <td class="num">
                <!--					<span v-if="item.reserve==1" class="flag">商品已被预定</span>-->
                <!--					<span v-else class="flag">商品未被预定</span>-->
                {{item.date}}
            </td>
            <td class="redcolor" >
                <!--					{{item.productPrice*item.productQuentity}}-->
                <div class="layui-btn-container">
                <button v-if="item.state==1"  class="layui-btn layui-btn-primary layui-border-blue">已完成</button>
                <button v-if="item.state==0"   class="layui-btn layui-btn-primary layui-border-orange">待支付</button>
                <button v-if="item.state==-1"  class="layui-btn layui-btn-primary layui-border-red">已取消</button>
                </div>
            </td>
            <td class="del">
                <button  class="layui-btn layui-btn-danger" @click="del(item);">删除</button>
                <button v-if="item.state==0"  class="layui-btn layui-btn-normal" @click="update(item);">支付</button>
            </td>
        </tr>
        </tbody>
<!--        <tfoot>
        <tr class="footer">
            <td><input type="checkbox" :checked="checkAllFlag" @click="checkAll"/></td>
            <td>
                <span class="redcolor">全选</span>&nbsp;&nbsp;
            </td>
            <td colspan="4">
                总计：<span>{{totalMoney}}</span>元
                <button @click="jz" type="button" class="btn">结账</button>
                &lt;!&ndash;					<button type="button" class="btn" @click="reserved">预定</button>&ndash;&gt;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;
            </td>
        </tr>
        </tfoot>-->
    </table>
</div>
<footer id="footer">

    <div class="footer2">
        <div class="container">
            <div class="row">

                <div class="col-md-6 panel">
                    <div class="panel-body">
                        <p class="simplenav">
<!--                            <a href="index.html">Home</a> |-->
<!--                            <a href="about.html">About</a> |-->
<!--                            <a href="services.html">Services</a> |-->
<!--                            <a href="price.html">Price</a> |-->
<!--                            <a href="projects.html">Projects</a> |-->
<!--                            <a href="contact.html">Contact</a>-->
                        </p>
                    </div>
                </div>

                <div class="col-md-6 panel">
                    <div class="panel-body">
                        <p class="text-right">
                            Copyright &copy; 2021. Template by Shuanmazhuang
                        </p>
                    </div>
                </div>

            </div>
            <!-- /row of panels -->
        </div>
    </div>
</footer>
</body>
</html>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
            totalMoney:0,
            productList:[],
            checkAllFlag:false
        },
        created:function(){
            this.cartView();
        },
        methods:{
            getGoodsHref:function(val){
                return '/ProductDetails?ParkingId='+val
            },
            cartView:function () {
                let _this=this;
                $.ajax({
                    url:'/getOrder',
                    success:function (res) {
                        _this.productList=res;
                        console.log(_this.productList);
                    }
                })
            },
            //鐐瑰嚮澧炲姞鎴栧噺灏戝晢鍝佹暟閲忔寜閽悗淇敼瀵瑰簲閲戦
            changeMoney:function (product,way) {
                if (way>0) {
                    product.productQuentity++;
                }else{
                    product.productQuentity--;
                    if (product.productQuentity<1) {
                        product.productQuentity=1;
                    }
                }
                this.getTotalMoney();
            },
            //鍗曢€夋璁剧疆
            checkBox:function (item){
                let _this=this;
                let num=0;
                if (typeof item.check == "undefined") {
                    this.$set(item,"check",true);
                }else{
                    item.check = !item.check;
                }
                this.productList.forEach(function (item,value) {
                    if (item.check) {
                        num++;
                    }
                })
                if (num==_this.productList.length) {
                    this.checkAllFlag=true;
                }else{
                    this.checkAllFlag=false;
                }
                this.getTotalMoney();
            },
            //鍏ㄩ€夋寜閽缃�
            checkAll:function (){
                var _this=this;
                this.checkAllFlag = !this.checkAllFlag;
                this.productList.forEach(function(item,index){
                    if (typeof item.check == "undefined") {
                        _this.$set(item,"check",_this.checkAllFlag);
                    }else{
                        item.check = _this.checkAllFlag;
                    }
                })
                this.getTotalMoney();
            },
            //鎬婚噾棰濊缃�
            getTotalMoney:function () {
                var _this=this;
                this.totalMoney = 0;
                this.productList.forEach(function (item,index) {
                    if (item.check) {
                        let num=item.price*1;
                        _this.totalMoney += num;
                    }
                })
            },
            //鍒犻櫎鍟嗗搧
            del: function (item) {
                let list=[];
                let index=this.productList.indexOf(item);
                this.productList.splice(index,1);
                this.getTotalMoney();
                list.push(item.oid);
                console.log(list);
                $.ajax({
                    url:'/delOrder',
                    data:{
                        'deleteCartList':list
                    },
                    success:function (res) {
                        layui.use('layer',function () {
                            layer.msg("删除成功！");
                        })
                    }
                })
            },
            update: function (item) {
                let ok=confirm("是否支付?");
                if(ok!=true){
                    return;
                }
                let list=[];
                list.push(item.oid);
                console.log(list);
                $.ajax({
                    url:'/updateOrder',
                    data:{
                        'deleteCartList':list
                    },
                    success:function (res) {
                        if(res=="1"){
                            layui.use('layer',function () {
                                layer.msg("余额不足！购买失败");
                            })
                        }else {
                            item.state = 1;

                            layui.use('layer', function () {
                                layer.msg("支付成功！");
                            })
                        }
                    }
                })
            },
            reserved:function () {
                let that=this;
                let reservedList=[];
                let flag="0";
                for (let i = 0; i < this.productList.length; i++) {
                    if(this.productList[i].check){
                        if(this.productList[i].reserve=="1"){
                            layui.use('layer',function () {
                                layer.msg("商品已被预定");
                            })
                            break;
                        }
                        reservedList.push(this.productList[i].id);
                    }
                }
                layui.use('layer',function (){

                    $.ajax({
                        url: '/reserve',
                        data: {
                            'reserveList':reservedList
                        },
                        success: function (res) {
                            let size=that.productList.length;
                            if (res=="1"){
                                for (let i = 0; i < size; i++) {
                                    if(that.productList[i].check==true){
                                        that.productList.splice(i,1);
                                        i--;
                                        size--;
                                    }
                                }
                                $.ajax({
                                    url:'/deleteCart',
                                    data:{
                                        'deleteCartList':reservedList
                                    },
                                    success:function (res) {
                                    }
                                })
                                that.getTotalMoney();
                                layer.msg("预定成功");
                            }
                            else {
                                layer.msg("预定失败");
                            }
                        }
                    })
                })
            },
            jz:function (){
                let size=this.productList.length;
                for (let i = 0; i < size; i++) {
                    if(that.productList[i].check==true){
                        break;
                    }
                    layui.use('layer',function () {
                        layer.msg("您还没有选择商品");
                    })
                    return ;
                }
                let that=this;
                let ok=confirm("是否结账？总金额为："+this.totalMoney);
                if(ok==false){
                    ok=0;
                }else{
                    ok=1;
                }
                let jz=[];

                this.productList.forEach(function (item) {
                    if (item.check) {
                        jz.push(item.id);
                    }
                });
                $.post({
                    url: "/jiezhang",
                    data: {
                        "jz" : jz,
                        "ok" : ok,} ,
                    success: function (data){
                        layui.use('layer',function (){
                            if(ok=="1") {
                                layer.msg("交易完成！")
                            }else if(ok=="0"){
                                layer.msg("订单已生成,请到我的订单中取消！")
                            }

                        })
                        let size=that.productList.length;
                        for (let i = 0; i < size; i++) {
                            if(that.productList[i].check==true){
                                that.productList.splice(i,1);
                                i--;
                                size--;
                            }
                            that.checkAllFlag = !that.checkAllFlag;
                            that.productList.forEach(function(item,index){
                                if (typeof item.check == "undefined") {
                                    that.$set(item,"check",that.checkAllFlag);
                                }else{
                                    item.check = that.checkAllFlag;
                                }
                            })
                            that.getTotalMoney();
                        }}}
                )
            }
        }
    })
</script>